import { useImperativeHandle, forwardRef, memo, lazy } from 'react'
import { Menu } from 'antd'
import './index.scss'
const SvgIcon = lazy(() => import('../../SvgIcon'))
const MenuBox = memo(forwardRef((props: any, ref: any) => {
    let { defaultKey = '', menus = [], change } = props
    const handleToPath = (data: any) => {
        change(data)
    }
    if (!defaultKey && menus.length) {
        defaultKey = menus[0].key
    }
    return (
        <>
            <div className='menu-content'>
                <Menu onClick={handleToPath} className='left-menu' selectedKeys={[defaultKey]} defaultSelectedKeys={[defaultKey]}>
                    {menus.map((item: any, index: number) => {
                        return (
                            <Menu.Item key={item.key}>
                                <SvgIcon iconClass={item.icon} />
                                <span style={{ marginLeft: '5px' }}>{item.label}</span>
                            </Menu.Item>
                        )
                    })}
                </Menu>
            </div>
        </>
    )
}))
export default MenuBox